import { Dep } from "./Dep.js"
/**
 * Watcher
 *  更新页面
 * 每个节点对应一个Watcher,在节点编译Compiler时实例化
 * 将watcher实例保存到Dep观察中
 */
export class Watcher {
	constructor(vm, key, cb) {
		this.vm = vm
		// data 中的属性名称
		this.key = key
		// 当数据变化的时候，调用 cb 更新视图
		this.cb = cb
		// 在 Dep 的静态属性上记录当前 watcher 对象，当访问数据的时候把 watcher 添加到dep 的 subs 中
		Dep.target = this
		// 触发一次 getter，让 dep 为当前 key 记录 watcher
		this.oldValue = vm[key]
		// 清空 target
		Dep.target = null
	}
	update() {
		const newValue = this.vm[this.key]
		if (this.oldValue === newValue) {
			return
		}
		this.cb(newValue)
	}
}
